<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑白棋游戏</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px auto;
        }

        td {
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            cursor: pointer;
        }

        #message {
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1>黑白棋游戏</h1>
    <table id="board">
        <?php
        session_start();
        if (!isset($_SESSION['board'])) {
            $_SESSION['board'] = array_fill(0, 8, array_fill(0, 8, 0));
            $_SESSION['board'][3][3] = 2;
            $_SESSION['board'][3][4] = 1;
            $_SESSION['board'][4][3] = 1;
            $_SESSION['board'][4][4] = 2;
            $_SESSION['currentPlayer'] = 1;
        }
        $board = $_SESSION['board'];
        for ($i = 0; $i < 8; $i++) {
            echo '<tr>';
            for ($j = 0; $j < 8; $j++) {
                $cellValue = $board[$i][$j];
                $color = $cellValue === 1 ? 'black' : ($cellValue === 2 ? 'white' : '');
                echo '<td data-row="' . $i . '" data-col="' . $j . '" style="background-color: ' . $color . ';"></td>';
            }
            echo '</tr>';
        }
        ?>
    </table>
    <div id="message">轮到玩家 <?php echo $_SESSION['currentPlayer'] === 1 ? '黑方' : '白方'; ?> 落子</div>
    <script>
        const board = document.getElementById('board');
        const messageDiv = document.getElementById('message');

        board.addEventListener('click', function (event) {
            if (event.target.tagName === 'TD' && event.target.style.backgroundColor === '') {
                const row = event.target.dataset.row;
                const col = event.target.dataset.col;
                const currentPlayer = <?php echo $_SESSION['currentPlayer']; ?>;

                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'play.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            const newBoard = response.board;
                            for (let i = 0; i < 8; i++) {
                                for (let j = 0; j < 8; j++) {
                                    const cell = document.querySelector(`[data-row="${i}"][data-col="${j}"]`);
                                    const color = newBoard[i][j] === 1 ? 'black' : (newBoard[i][j] === 2 ? 'white' : '');
                                    cell.style.backgroundColor = color;
                                }
                            }
                            if (response.winner) {
                                messageDiv.textContent = `玩家 ${response.winner === 1 ? '黑方' : '白方'} 获胜！`;
                                disableBoard();
                            } else if (response.draw) {
                                messageDiv.textContent = '平局！';
                                disableBoard();
                            } else {
                                messageDiv.textContent = `轮到玩家 ${response.nextPlayer === 1 ? '黑方' : '白方'} 落子`;
                            }
                        } else {
                            messageDiv.textContent = '该位置不能落子，请重新选择！';
                        }
                    }
                };
                xhr.send(`row=${row}&col=${col}&player=${currentPlayer}`);
            }
        });

        function disableBoard() {
            const cells = document.querySelectorAll('td');
            cells.forEach(cell => {
                cell.style.cursor = 'default';
                cell.removeEventListener('click', handleClick);
            });
        }
    </script>
</body>

</html>